<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
		<meta name="author" content="www.frebsite.nl" />
		<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
		<meta name="robots" content="noindex, nofollow" />

		<title>jQuery.mmenu &raquo; Examples</title>

		<link type="text/css" rel="stylesheet" href="../docs.css" />
		<link type="text/css" rel="stylesheet" href="../../mmenu.css" />
		
		<!-- for the one page -->
		<style type="text/css">
			#intro,
			#first,
			#second,
			#third
			{
				height: 400px;
			}
			#intro
			{
				padding-top: 40px;
			}
			#first,
			#second,
			#third
			{
				border-top: 1px solid #ccc;
				padding-top: 60px;
			}
		</style>
		
		<!-- for the fixed header -->
		<style type="text/css">
			#header
			{
				margin-left: 0px;
				position: fixed;
				top: 0;
				left: 0%;
				width: 100%;

				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;

				-webkit-transition: left 0.4s ease, right 0.4s ease, margin 0.4s ease;
				-moz-transition: left 0.4s ease, right 0.4s ease, margin 0.4s ease;
				transition: left 0.4s ease, right 0.4s ease, margin 0.4s ease;
			}
			html.mm-opened #header
			{
				margin-left: 0px;
				left: 0%;
			}
			html.mm-opening #header
			{
				margin-left: -65px;
				left: 100%;
			}
			@media all and (min-width: 500px) {
				html.mm-opening #header
				{
					left: 500px;
				}
			}
		</style>
		
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
		<script type="text/javascript" src="../../jquery.mmenu.min.js"></script>
		<script type="text/javascript">
			$(function() {
				var $menu = $('nav#menu'),
					$html = $('html, body');

				$menu.mmenu({
					onClick: {

						//	set the location.href after the menu closes
						setLocationHref: function()
						{
							var href = $(this).attr( 'href' );
							
							//	set location.href only if the clicked link is not linked to an anchor
							return href.slice( 0, 1 ) != '#';
						},

						//	callback after the menu closes
						callback: function()
						{
							var href = $(this).attr( 'href' );
							
							//	if the clicked link is linked to an anchor, scroll the page to that anchor 
							if ( href.slice( 0, 1 ) == '#' )
							{
								setTimeout(
									function()
									{
										$html.animate({
											scrollTop: $( href ).offset().top
										});	
									}, 10
								);							
							}
						}
					},
					configuration: {
						//	For some odd reason, the header won't stay "fixed"
						//	when using hardware acceleration
						hardwareAcceleration: false
					}
				});
			});
		</script>
	</head>
	<body>
		<div id="page">
			<div id="header">
				<a href="#menu"></a>
				Examples
			</div>
			<div id="content">
				<div id="intro">
					<p>This is the <strong>one page scrolling example</strong> demo page.<br />
						Click the menu-button in the header to open the menu.</p>
	
					<p>The links in the menu link to a section on the same page, some small javascript makes the page scroll smoothly.</p>
				</div>
				<div id="first">
					<p><strong>This is the first section.</strong><br />
						<a href="#menu">Open the menu</a></p>
				</div>
				<div id="second">
					<p><strong>This is the second section.</strong><br />
						<a href="#menu">Open the menu</a></p>
				</div>
				<div id="third">
					<p><strong>This is the third section.</strong><br />
						<a href="#menu">Open the menu</a></p>
				</div>
			</div>
			<nav id="menu">
				<ul>
					<li><a href="index.html">Basic example</a></li>
					<li><a href="horizontal-submenus.html">Horizontal sliding submenus example</a></li>
					<li><a href="vertical-submenus.html">Vertical submenus example</a></li>
					<li class="Selected">
						<a href="onepage.html">One page scrolling example</a>
						<ul>
							<li><a href="#content">Introduction</a></li>
							<li><a href="#first">First section</a></li>
							<li><a href="#second">Second section</a></li>
							<li><a href="#third">Third section</a></li>
						</ul>
					</li>
					<li><a href="iconbar.html">Iconbar</a></li>
					<li><a href="dragopen.html">Drag/swipe the menu open</a></li>
					<li><a href="advanced.html">Advanced example</a></li>
				</ul>
			</nav>
		</div>
	</body>
</html>